<template>
	<div style="display:flex; justify-content:flex-end;" @mousemove="handleMouseMove">
    <!-- <RoomMap style="margin-right: 50px; margin-top: 50px;" :is-admin="true"></RoomMap> -->
    <div v-if="userStatus === 'admin'" style="margin-right: 300px; width: 1000px; text-align: center;">
      <div style="display: flex; margin-left: 300px; margin-top: 20px;">
        <a-select
          ref="select"
          v-model:value="scriptBinded"
          style="width: 180px"
          :options="scripts"
        />
        <a-button type="primary" style="margin-left: 30px;" @click="bindScript">绑定剧本</a-button>
      </div>
      <ScriptsComponent v-if="script != 0" :id="script" :key="script" style="margin-top: 20px; margin-left: 50px; width: 1200px;"/>
    </div>
    <div v-else-if="userStatus === 'member'" style="margin-right: 300px; width: 1000px; text-align: center;">
      <div style="display: flex; margin-left: 300px; margin-top: 20px;">
        <a-select
          ref="select"
          v-model:value="characterBinded"
          style="width: 180px"
          :options="characterOption"
        />
        <a-button type="primary" style="margin-left: 30px;" @click="bindCharacter">绑定角色</a-button>
      </div>
      <CharacterComponenet v-if="character != 0" :id="character" :key="character" style="margin-top: 20px;"/>
    </div>
		<ChatRoom style="width: 800px;"></ChatRoom>
	</div>
  <a-drawer
    v-model:open="drawerOpen"
    class="custom-class"
    root-class-name="root-class-name"
    :root-style="{ color: 'blue' }"
    placement="left"
    @after-open-change=""
    width="1000px"
  >
  </a-drawer>
</template>

<script lang="ts">
import { ref, onMounted, reactive } from 'vue';
import ChatRoom from './chat.vue';
import CharacterComponenet from '../character/characterComponent.vue'
import ScriptsComponent from '../scripts/scriptComponent.vue'
import RoomMap from './map.vue'
import { message, type SelectProps } from 'ant-design-vue';
import { getCharacterList } from '@/api/character_api';
import { useRoute } from 'vue-router';
import { bindRoomCharacter, bindRoomScript, getRoomById } from '@/api/room_api';
import { searchScripts } from '@/api/scripts_api';
export default {
    name: 'RoomDetail',
    components: {
      ChatRoom,
      CharacterComponenet,
      ScriptsComponent
    }
}
</script>

<script lang="ts" setup>
const drawerOpen = ref<boolean>(false);
const characterBinded = ref<number>(0);
const characterOption = ref<SelectProps['options']>([]);
const character = ref<number>(0);
const roomId = ref<number>(0)
const userStatus = ref<string>("")
const collectedScripts = ref<SelectProps['options']>([]);
const createdScripts = ref<SelectProps['options']>([]);
const scripts = ref<SelectProps['options']>([
  {
    label: "我收藏的",
    options: collectedScripts.value
  },
  {
    label: "我创建的",
    options: createdScripts.value
  }
]);
const scriptBinded = ref<number>(0)
const script = ref<number>(0)

onMounted(() => {
  const router = useRoute()
  roomId.value = Number(router.params.id)
  getRoomById(roomId.value)
  .then(resp => {
      if (resp.data.isAdmin === true) {
        userStatus.value = "admin"
        scriptBinded.value = resp.data.bindScriptId
        script.value = scriptBinded.value
        searchScript(1, 100)
      } else {
        userStatus.value = "member"
        getCharacterList()
        .then(resp=>{
          for (let i = 0; i < resp.data.length; i++) {
            characterOption.value?.push({
              label: resp.data[i].name,
              value: resp.data[i].id
            })
          }
        })
        .catch(err=>{})
        characterBinded.value = resp.data.characterId
        character.value = characterBinded.value
      }
  })
  .catch(err => {})
});
function handleMouseMove(event: MouseEvent) {
  const { clientX } = event;
  const borderThreshold = 10;
  if (clientX < borderThreshold) {
    // 鼠标滑动到左侧边框的处理逻辑
    drawerOpen.value = true
  }
};
const bindCharacter = () => {
  bindRoomCharacter(roomId.value, characterBinded.value)
  .then(resp=>{
    message.success("绑定角色成功！")
    character.value = characterBinded.value
  })
  .catch(err=>{})
}
interface SearchData {
  search: string,
  creator: boolean,
  collection: boolean,
}
const searchData = reactive<SearchData>({
  search: '',
  creator: false,
  collection: false,
})
const searchScript = (page:number, pageSize:number) => {
  // 搜索收藏的
  searchData.collection = true
  searchScripts(searchData, page, pageSize)
  .then(response => {
    for (let index = 0; index < response.data.list.length; index++) {
      collectedScripts.value?.push({
        label: response.data.list[index].name,
        value: response.data.list[index].id
      })
    }
    searchData.collection = false
  })
  .catch(error =>{})
  searchData.creator = true
  searchScripts(searchData, page, pageSize)
  .then(response => {
    for (let index = 0; index < response.data.list.length; index++) {
      createdScripts.value?.push({
        label: response.data.list[index].name,
        value: response.data.list[index].id
      })
    }
    searchData.creator = false
  })
  .catch(error =>{})
  searchData.search = ""
};
const bindScript = () => {
  bindRoomScript(roomId.value, scriptBinded.value)
  .then(resp=>{
    message.success("绑定剧本成功！")
    script.value = scriptBinded.value
  })
  .catch(err=>{})
}
</script>

<style lang="scss">
body {
	font-family: 'Quicksand', sans-serif;
}
</style>